// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
// import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// import { HashRouter as Router, Route, Link } from 'react-router-dom'
// import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

// import { RouteConfig } from 'react-router-config';

// import { renderRoutes } from 'react-router-config';
import { BrowserRouter } from 'react-router-dom';

// 引入css文件
import "./index.css"
// React路由介绍
// 现代的前端应用太多都是SPA(单页应用程序)
// 也就是只是HTML页面的应用程序 因为他的用户体验更好
// 对服务器压力更小 所有更受欢迎
// 为了有效的使用单个页面来管理原理更多页面的功能                                                                                                                                                                                                                                                                 
// 前端路由应运而生

// 前端路由的功能：让用户从一个视图（页面） 导航到另外一个视图（页面）
// 前端路由是一套映射规则 在React中 是URL路径 和组件的对应关系
// 使用React路由简单来说 就是配置路径和组件(匹配)


// 1. 安装路由 npm add react-router-dom
// 2. 导入组件 import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// 3. 使用Router 组件包裹整个应用


// 基本使用


// class First extends React.Component {
//     render() {
//         return (<p>页面一内容(默认路由)</p>)
//     }
// }


class Home extends React.Component {
    render() {
        return (<h1>我是后台首页</h1>)
    }
}
// const First = () => <p>页面一内容</p>
// const Home = () => <h1>这是HOME组件内容</h1>



// class App extends React.Component {

//     render() {
//         return (
//             <Router>
//                 <div>
//                     <h1>React路由基础</h1>
//                     <div>
//                         {/* 指定路由的出口 */}
//                         <Route path="/first" component={First} />
//                         <Route path="/home" element={Home} />
//                     </div>
//                     {/* 指定路由的入口 */}
//                     <Link to="/first">页面一</Link>
//                     <br />
//                     <Link to="/home">首页</Link>
//                 </div>
//             </Router>
//         )
//     }
// }






class Login extends React.Component {


    handlerLogin = () => {
        this.props.history.push("/home")
    }

    return = () => {
        this.props.history.to(-1)
    }

    render() {
        return (
            <div>
                <p>登录页面</p>
                <button onClick={this.handlerLogin}>去登录</button>
                <button onClick={this.return}>返回</button>
            </div>
        )
    }
}


const routes = [
    {
        path: '/',
        component: Home,
        routes: [
            {
                path: '/login',
                component: Login
            }
        ]
    }
]

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                {/* <div> */}
                {/* <h1>编程式导航:</h1> */}
                {/* <Link to="/login">去登录页面</Link> */}
                {/* <Route path="/" component={First}></Route> */}
                {/* <Route path="/login" component={Login}></Route> */}
                {renderRoutes(routes)}
                {/* <Route path="/home" component={Home}></Route> */}
                {/* </div>  */}
            </BrowserRouter>
        )
    }
}


//3 渲染react元素
ReactDOM.render(
    <App />,
    document.getElementById('root'))
